<template>
    <div>
        <div class="search-content">
            <el-form ref="searchForm" :inline="true" :model="searchContent">
                <el-form-item label="礼品名称：" prop="pgoods_name">
                    <el-input
                        class="search-content-input"
                        v-model="searchContent.pgoods_name"
                        placeholder="礼品名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label prop="pgoods_show">
                    <el-select clearable v-model="searchContent.pgoods_show" placeholder="是否上架">
                        <el-option label="否" :value="0"></el-option>
                        <el-option label="是" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label prop="category_id">
                    <el-select clearable v-model="searchContent.category_id" placeholder="产品类目">
                        <el-option
                            v-for="item in category_options"
                            :key="item.category_id"
                            :label="item.category_name"
                            :value="item.category_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label prop="pgoods_ifpay">
                    <el-select clearable v-model="searchContent.pgoods_ifpay" placeholder="兑换方式">
                        <el-option label="积分兑换" :value="0"></el-option>
                        <el-option label="积分+现金兑换 " :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label prop="pgoods_brand">
                    <el-select clearable v-model="searchContent.pgoods_brand" placeholder="商品品牌">
                        <el-option
                            v-for="item in pgoods_brand_options"
                            :key="item.category_id"
                            :label="item.brand_name"
                            :value="item.category_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="pgoods_id">
                    <el-input
                        v-model="searchContent.pgoods_id"
                        placeholder="商品ID"
                        @input="searchContent.pgoods_id = searchContent.pgoods_id.replace(/^0|[^0-9]/g,'')"
                        maxlength="10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="供应商：" prop="pgoods_business_txt">
                    <el-select
                        v-model="searchContent.pgoods_business_txt"
                        filterable
                        placeholder="请选择"
                        :filter-method="filterMethod"
                        @change="handleChange"
                    >
                        <el-option label="京东" value="京东"></el-option>
                    </el-select>
                </el-form-item>
                <span v-show="searchContent.pgoods_business_txt=='京东'">
                    <el-form-item label="更新类型：" prop="pgoods_update_type">
                        <el-select
                            clearable
                            v-model="searchContent.pgoods_update_type"
                            placeholder="更新类型"
                        >
                            <el-option key="3" label="全部" value="3"></el-option>
                            <el-option key="2" label="价格更新" value="2"></el-option>
                            <el-option key="1" label="商品更新" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="差价排序：" prop="pgoods_profit_order">
                        <el-select
                            clearable
                            v-model="searchContent.pgoods_profit_order"
                            placeholder="差价排序"
                        >
                            <el-option key="1" label="升序" value="1"></el-option>
                            <el-option key="2" label="倒序" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </span>
                <el-form-item label="旅游商品：" prop="pgoods_travel">
                    <el-select clearable v-model="searchContent.pgoods_travel" placeholder="旅游商品">
                        <el-option key="否" label="否" value="0"></el-option>
                        <el-option key="是" label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="虚拟：" prop="pgoods_virtual">
                    <el-select clearable v-model="searchContent.pgoods_virtual" placeholder="虚拟">
                        <el-option key="否" label="否" value="0"></el-option>
                        <el-option key="是" label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品编码：" prop="pgoods_serial">
                    <el-input
                        class="search-content-input"
                        v-model="searchContent.pgoods_serial"
                        placeholder="商品编码"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="resetSearchData">重置</el-button>
                </el-form-item>
                <br />
                <!-- <el-form-item label="京东商品编码：" label-width="100px">
                    <el-input class="search-content-input" v-model="jdSku" placeholder="京东商品编码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addJd">新增京东商品</el-button>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="search-list">
            <el-table ref="elTable" class="table-box" :data="goodsList" border :height="oHeight" @selection-change="seleChange" :header-cell-class-name="hdCellClassName" >
                <el-table-column align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" prop="pgoods_id" label="礼品ID" min-width="80"></el-table-column>
                <el-table-column align="center" prop="pgoods_serial" label="商品编号" min-width="150"></el-table-column>
				<el-table-column align="center" prop="pgoods_id" label="更新情况" min-width="80" #default="{row}">
					<div v-if="row.pgoods_new_update==1||row.pgoods_price_update==1" style="color:red;">
						<div>{{row.pgoods_new_update==1?'商品更新':''}}</div>
						<div>{{row.pgoods_price_update==1?'价格更新':''}}</div>
					</div>
					<div v-else>暂无更新</div>
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_name"
                    label="礼品名称"
                    min-width="600"
                    #default="{row}"
                >
                    <div class="goosFormatter">
                        <el-image class="pgoods_image" :src="row.pgoods_image" fit="cover" lazy>
                            <div slot="error" class="image-slot">
                               <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <!--img :src="row.pgoods_image" /-->
                        <span>{{row.pgoods_name}}</span>
                    </div>
                </el-table-column>
                <el-table-column align="center" prop="pgoods_points" label="兑换元宝" min-width="80"></el-table-column>
                <!-- <el-table-column align="center" prop="pgoods_tax_point" label="税点" min-width="80"></el-table-column> -->
                <el-table-column
                    align="center"
                    prop="pgoods_business_txt"
                    label="供应商"
                    min-width="80"
                ></el-table-column>
                <el-table-column align="center" prop="pgoods_price" label="礼品原价" min-width="80"></el-table-column>
                <el-table-column v-if="searchObj.pgoods_business_txt==='京东'" align="center" prop="pgoods_comprice" label="京东协议价" min-width="100"></el-table-column>
                <el-table-column v-if="searchObj.pgoods_business_txt==='京东'" align="center" prop="pgoods_profit" label="差价利润" min-width="80"></el-table-column>
                <el-table-column align="center" prop="pgoods_storage" label="库存" min-width="80"></el-table-column>
                <el-table-column align="center" prop="pgoods_view" label="浏览" min-width="80"></el-table-column>
                <el-table-column align="center" prop="pgoods_salenum" label="售出" min-width="80"></el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_show"
                    label="上架"
                    min-width="80"
                    #default="{row}"
                >
                    <el-switch
                        v-model="row.pgoods_show"
                        :disabled="!+row.pgoods_price_status && row.pgoods_show != 1"
                        @change="(val)=>{changeShow(val,row,'pgoods_show')}"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_commend"
                    label="推荐"
                    min-width="120"
                    #default="{row}"
                >
                    <el-switch
                        v-model="row.pgoods_commend"
                        @change="(val)=>{changeShow(val,row,'pgoods_commend')}"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_checked"
                    label="审核"
                    min-width="120"
                    #default="{row}"
                >
                    <el-switch
                        v-model="row.pgoods_checked"
                        @change="(val)=>{changeShow(val,row,'pgoods_checked')}"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_price_status"
                    label="商品价格审核"
                    min-width="120">
                    <template #default="{ row }">
                        <span v-if="statusType[row.pgoods_price_status]" :class="statusType[row.pgoods_price_status].class">
                            {{ statusType[row.pgoods_price_status].label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="pgoods_editor"
                    label="最近编辑者"
                    min-width="110">
                </el-table-column>
                <el-table-column
					fixed="right"
                    align="center"
                    prop="isInitiative"
                    label="操作"
                    min-width="240"
                    #default="{row}"
                >
                    <el-button size="mini " type="primary" @click="updateCom(row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="delCom(row)">删除</el-button>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <el-button size="mini" type="primary" class="btn-bottom" @click="addCom">新增</el-button>
                    <el-button type="primary" class="btn-bottom" @click="delCom(check,'all')">删除</el-button>
                    <el-button type="primary" class="btn-bottom" @click="updateButton">更新</el-button>
                    <el-button type="primary" class="btn-bottom" @click="checkOut">检出</el-button>
                    <el-button type="primary" class="btn-bottom" @click="expertData">导出检索数据</el-button>
                    <el-button type="primary" class="btn-bottom" @click="dialogVisible = true">新增京东商品</el-button>
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <list-drawer ref="commodityDrawer" :cgy="category_options" :brand="pgoods_brand_options"></list-drawer>
        <update-drawer v-if="category_options" ref="updateDrawer" :cgy="category_options" :brand="pgoods_brand_options"></update-drawer>
        <el-dialog
            title="新增京东商品"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
                <template>
                    <el-radio v-model="spec" :label="0">无规格</el-radio>
                    <el-radio v-model="spec" :label="1">有规格</el-radio>
                </template>  
                <br>   
                <br>          
                <template>
                   京东商品编码： <el-input class="search-content-input" v-model="jdSku" placeholder="京东商品编码"></el-input>
                </template>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="addJd">确 定</el-button>
            </span>
        </el-dialog>        
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import listDrawer from './commodity-drawer';
import updateDrawer from './commodity-drawer-update';
import { objScreen } from "@/common/js/util";
export default {
    components: { listDrawer, updateDrawer },
    props: ['id'],
    data() {
        return {
			value1:'',
            dialogVisible:false,
            goodsList: [{
                id: 1,
                storeName: 2,
                arriveDate: 3,
                addTime: 4,
                typeName: 4,
                originateName: 4,
                reservationStatusName: 4,
                isInitiative: 4,
            }],
            statusType: [
                { label: '未审核', value: 0, class: 'color-danger' },
                { label: '已审核', value: 1, class: 'color-success' }
            ],
            oHeight: 800,
            searchContent: {
                currentPage: 1,
                pageSize: localStorage.getItem('pageSize') * 1 || 10,
                pgoods_id: '',
                pgoods_name: '',
                pgoods_show: '',
                category_id: '',
                pgoods_ifpay: '',
                pgoods_brand: '',
                pgoods_business_txt: '',
                pgoods_travel: '',
                pgoods_virtual: '',
                pgoods_serial: '',
                pgoods_update_type: '',
                pgoods_profit_order: '',

            },
            searchObj: {},
            total: 0,
            check: [],
            category_options: [],
            pgoods_brand_options: [],
            jdSku: '',
            spec:0,
            isChange: false, // 是否更新business_txt
        };
    },
    created() {
        this.getListData();
        this.beforeData();
    },
    methods: {
        // cleardata(){
        //     this.spec='';
        //     this.jdSku = '';
        //     this.dialogVisible = false;
        // },
        handleClose(){
            this.spec=0;
            this.jdSku = '';
            this.dialogVisible = false; 
        },
        addJd() {
            console.log(this.jdSku)
            console.log(this.spec)
            if(this.jdSku && this.spec== 0 || this.spec== 1){
            this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=jdAdd', {
                params: {
                    sku: this.jdSku,
                    spec:this.spec
                }
            }).then((res) => {
                if (res.code == 1) {
					this.getListData();//刷新数据
                    this._message('success', res.msg);
                    this.handleClose()
                }else{
					this._message('error', res.msg);
				}
            }).catch(err => {
                this._message('error', err);
            })
            }else{
               this._message('error', '请完善规格选择和编码'); 
            }
        },
        handleChange() {
            this.isChange = true;
        },
        search() {
            this.searchObj = objScreen({
                pgoods_id: this.searchContent.pgoods_id,
                pgoods_name: this.searchContent.pgoods_name,
                pgoods_show: this.searchContent.pgoods_show,
                category_id: this.searchContent.category_id,
                pgoods_ifpay: this.searchContent.pgoods_ifpay,
                pgoods_brand: this.searchContent.pgoods_brand,
                pgoods_business_txt: this.searchContent.pgoods_business_txt,
                pgoods_travel: this.searchContent.pgoods_travel,
                pgoods_virtual: this.searchContent.pgoods_virtual,
                pgoods_serial: this.searchContent.pgoods_serial,
                pgoods_update_type: this.searchContent.pgoods_update_type,
                pgoods_profit_order: this.searchContent.pgoods_profit_order,
            })
            this.getListData();
        },
        resetSearchData() {
            if(this.searchContent.pgoods_business_txt != '') this.isChange = true;
            this.$refs.searchForm.resetFields();
            this.searchObj = {};
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        getListData() {						
            var data = this.searchObj;
            data.page = this.searchContent.currentPage;
            data.pageSize = this.searchContent.pageSize;
            data.pgoods_brand = this.id;
            if(this.isChange) {
                resize(this);
                this.isChange = false;
            }
            this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=list', {
                params: data
            }).then((res) => {
                // console.log(res)
                if (res.code === 1) {
                    this.total = res.data.totalCount;
                    this.goodsList = res.data.list;
                } else {
                    this.total = 0;
                    this.goodsList = [];
                    this._message('error', res.msg);
                }
                if (data.pgoods_business_txt) {
                    this.$nextTick(() => {
                        this.$refs.elTable.doLayout()
                    })
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        beforeData() {
            var data = {
                page: 1,
                pageSize: 99999
			};
			
			this.$http.get(`/admin/pointprod/index.php?act=pointCategory&op=listTree`).then(res => {
                if (res.code === 1) {
                    this.category_options = res.data;
                } else {
                    this._message('error', err);
                }

            }).catch(err => {
                this._message('error', err);
            })

            this.$http.get('admin/pointprod/index.php?act=pointBrand&op=list', {
                params:data
            }).then(res => {
                if (res.code === 1) {
                    this.pgoods_brand_options = res.data.list
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        seleChange(check) {
            this.check = check;
        },
        editGood(obj) {
            return this.$http
                .post(
                    '/admin/pointprod/index.php?act=pointGoods&op=update',
                    obj
                )
                .then(
                    (res) => {
                        if (res.code === 1) {
                            return Promise.resolve(res)
                        } else {
                            return Promise.reject(res)
                        }
                    }
                )
        },
        changeShow(val, row, type) {
            // console.log(val, row, type)
            let obj = {
                pgoods_id: row.pgoods_id,
                [type]: val
            }
            this.editGood(obj).then((res) => {
                this._message('success', res.msg)
            }).catch((err) => {
                this._message('error', err.msg)
            })
        },
        showFn(data) {
            this.$refs.ceshi.show_dialog_fn(data);
        },
        showDetailFn() {
            // this.$emit('addtab','品牌列表2','tab-list2',()=>import('./show-goods.vue'))
        },
        expertData() {
            var host;
            if (this.$store.state.isServer) {
                host = location.host.replace('admin', 'api');
            } else {
                host = location.host + '/api'
            }
            var url = location.protocol + "//" + host + '/admin/appointment/index.php?act=appoint&op=appointList&is_export=1';
            var searchData = this.searchObj;
            for (var key in searchData) {
                if (!(searchData[key] === null || searchData[key] === '' || searchData[key] === undefined || key === 'page' || key === 'pageSize' || key === 'currentPage')) {
                    url += '&' + key + '=' + searchData[key]
                }
            }
            console.log(url);
            window.location.href = url;
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
            this.searchContent.pageSize = pageSize;
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        handleCurrentChange(page) {
            this.searchContent.currentPage = page;
            this.getListData();
        },
        addCom() {
            this.$refs.commodityDrawer.show_dialog_fn();
        },
        delCom(val, type) {
            let id = '';
            if (type) {
                val.forEach((item, index) => {
                    id += item.pgoods_id + ','
                })
                id = id.slice(0, -1);
                console.log('id', id)
            } else {
                id = val.pgoods_id
			}
			if(!confirm('确定删除吗?')){
				return
			}
            this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=del&pgoods_id=' + id).then((res) => {
                if (res.code === 1) {
                    this._message('success', res.msg);
                    this.getListData();//refresh
                } else {
                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        updateCom(row) {
            this.$refs.updateDrawer.show_dialog_fn(row);
        },
        updateButton() {
            if (this.check && this.check.length == 0) {
                this._message('warning', '请勾选数据');
                return
            }
            let sku = '';
            this.check.forEach((item, index) => {
                sku += item.sku + ','
            })
            sku = sku.slice(0, -1);
            this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=jdUpdate', {
                params: {
                    sku
                }
            }).then((res) => {
                if (res.code === 1) {
					this.getListData();
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        checkOut() {
            this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=jdCheck').then((res) => {
                if (res.code === 1) {
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        expertData() {
            var isServer = this.$store.state.isServer;
            if (isServer) {
                var host = location.host.replace('admin', 'api');
            } else {
                var host = location.host + '/api'
            }
            var url = location.protocol + "//" + host + `/admin/pointprod/index.php?act=pointGoods&op=list&pgoods_brand=${this.id}&export=1`;
            var searchData = this.searchObj;
            for (var key in searchData) {
                if (!(searchData[key] === null || searchData[key] === '' || searchData[key] === undefined || key === 'page' || key === 'pageSize' || key === 'currentPage')) {
                    url += '&' + key + '=' + searchData[key]
                }
            }
            console.log(url);
            window.location.href = url;
        },
        filterMethod(val) {
            this.searchContent.pgoods_business_txt = val;
        },
        hdCellClassName() {
            return 'hdCellStyle'
        }
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-content-input {
    width: 200px;
}
.goosFormatter {
    text-align: left;
    display: flex;
    /*img {
        display: inline-block;
        width: 44px;
        min-height: 44px;
        vertical-align: middle;
        margin-right: 20px;
    }*/
    span {
        display: inline-block;
        flex: 1;
    }

    .pgoods_image {
        width: 44px;
        height: 44px;
        background: #f8f8f8;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
        margin-right: 20px;
    }
}
</style>